<template>
  <view class="videos_all" :style="{ minHeight: videoHeight + 'px' }">
    <view class="video_top" :style="{ paddingTop: navHeight + 'px' }">
      <image
        @click="goback()"
        class="video_back"
        src="http://llg.qiniu.comeinvip.com/images/navbar/return_icon_white.png"
      ></image>
    </view>
    <view class="playBack_con" :style="{ minHeight: videoHeight + 'px' }">
      <!-- <image class="video_img" mode="center" style="margin-top:422rpx;height:424rpx"
				src="http://llg.qiniu.comeinvip.com/images/video_img.jpg"></image> -->
      <video
        v-if="episodeCon && episodeCon.video[0]"
        autoplay
        class="video_img"
        :style="{ height: videoHeight + 'px' }"
        :src="episodeCon.video"
        enable-danmu
        danmu-btn
        controls
      ></video>
      <image
        v-else
        mode="center"
        class="video_img"
        style="margin-top: 422rpx; height: 424rpx"
        src="http://llg.qiniu.comeinvip.com/images/video_img.jpg"
      ></image>

      <view class="videos_function">
        <view class="vd_fun03">
          <image
            src="http://llg.qiniu.comeinvip.com/images/playback01.png"
          ></image>
          <text>收藏</text>
        </view>
        <view class="vd_fun02">
          <image
            src="http://llg.qiniu.comeinvip.com/images/playback02.png"
          ></image>
          <text>0</text>
        </view>
      </view>
      <view class="playback_setion" v-if="playBackArr">
        <view class="playback_photo">
          <view class="photo_lef">
            <image :src="playBackArr.cover[0]"></image>
            <text>{{ playBackArr.name }}</text>
          </view>
          <view
            v-if="episodeArr.length > 0"
            @click="goselection()"
            class="photo_rig"
            ><text>选集</text></view
          >
        </view>

        <view class="playback_basic">
          <text :class="[toggleName == '收起' ? 'toggle_show' : '']">{{
            playBackArr.introduce
          }}</text>
          <view @click="toggleBtn()" class="playback_more"
            ><text>{{ toggleName }}</text></view
          >
        </view>
      </view>
    </view>
    <!--选集弹层-->
    <view v-if="selectionsShow" class="selections_screen"></view>
    <view v-if="selectionsShow" class="selections_pop_con">
      <view class="selections_title">
        <view class="selections_lef">
          <image :src="playBackArr.cover"></image>
          <text>{{ playBackArr.name }}</text>
        </view>
        <view class="selections_rig">
          <image
            @click="selectionClose()"
            src="http://llg.qiniu.comeinvip.com/images/playclose.png"
          ></image>
        </view>
      </view>
      <view class="selections_list" v-if="episodeArr.length > 0">
        <block v-for="(item, ikey) in episodeArr" :key="ikey">
          <view
            @click="goshortTab(item, ikey)"
            :class="[ikey == shortIndex ? 'selections_lhover' : '']"
          >
            <text>{{ item.episode_number }}</text>
            <image
              :style="{ display: [ikey == shortIndex ? 'block' : 'none'] }"
              :src="item.imgico"
            ></image>
          </view>
        </block>
      </view>
      <text class="selections_style" v-else>暂无剧集哦~</text>
    </view>
  </view>
</template>

<script>
import config from "@/utils/config.js";
import configApi from "@/utils/config.js";
export default {
  data() {
    return {
      videoHeight: 500,
      navHeight: uni.getSystemInfoSync()["statusBarHeight"],
      selectionsShow: false,
      shortItem: [
        {
          num: 1,
          img: "http://llg.qiniu.comeinvip.com/images/xuanji.png",
        },
      ],
      shortIndex: 0,
      toggleName: "展开",
      getId: null,
      playBackArr: {}, //基本内容
      episodeArr: [], //剧集列表
      episodeCon: [], //剧集详情
    };
  },
  methods: {
    goback() {
      uni.navigateBack();
    },
    //选集
    goselection() {
      this.selectionsShow = true;
    },
    //关闭
    selectionClose() {
      this.selectionsShow = false;
    },
    //切换
    async goshortTab(item, index) {
      this.shortIndex = index;
      //点击播放视频
      let spb = {
        short_episode_id: item.id,
      };
      let episodeCon = await configApi.getEpisodeDetails(spb);
      episodeCon.video = JSON.parse(episodeCon.video);
      this.episodeCon = episodeCon;
    },
    //展示收起
    toggleBtn() {
      if (this.toggleName == "展开") {
        this.toggleName = "收起";
      } else {
        this.toggleName = "展开";
      }
    },
  },
  async onLoad(options) {
    console.log("短剧视频播放器", options);
    let vdHeight = uni.getSystemInfoSync().windowHeight;
    this.videoHeight = vdHeight;

    if (options.id) {
      this.getId = options.id;
    }

    try {
      //获取短剧详情内容
      let getcon = {
        short_tv_id: this.getId,
      };
      let playBackArr = await configApi.shortPlayDeatils(getcon);
      playBackArr.cover = JSON.parse(playBackArr.cover).map((item) => item.url);
      this.playBackArr = playBackArr;
      //剧集列表
      let episodeArr = await configApi.getEpisodeList(getcon);
      for (var a = 0; a < episodeArr.length; a++) {
        episodeArr[a].imgico =
          "http://llg.qiniu.comeinvip.com/images/xuanji.png";
      }
      this.episodeArr = episodeArr;
      //点击播放视频
      let spb = {
        short_episode_id: this.episodeArr[0].id,
      };
      let episodeCon = await configApi.getEpisodeDetails(spb);
      episodeCon.video = JSON.parse(episodeCon.video).map((item) => item.url);
      this.episodeCon = episodeCon;
      console.log("episodeCon", this.episodeCon);
    } catch (error) {
      wx.showToast({
        title: "网络异常",
        icon: "error",
        mask: true,
      });
    }
  },
};
</script>

<style>
@import url(@/static/css/contents.css);
.video_top {
  background: rgba(0, 0, 0, 0.5);
}
.videos_function {
  position: fixed;
  right: 0;
  bottom: 300rpx;
  z-index: 99;
  width: 750rpx;
}
.playback_setion {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
  width: 684rpx;
  margin: 0px;
  background: linear-gradient(180deg, rgba(24, 24, 24, 0) 0%, #000000 100%);
}
</style>
